<template>
	<!-- 列表项 -->
	<view class="card" :style="isShow ? '' : 'height: 50px;'">
		<view class="card_title">
			<view class="card_title_left">
				<image @click="isOpinionClick(true)" :class="!isOpinion ? 'card_title_left_disable' : ''"
					style="width: 1.2rem; height: 1.2rem" src="~@/static/images/correction/correction-warn-disposi.png">
				</image>
				<span @click="isOpinionClick(true)" :class="!isOpinion ? 'card_title_left_disable' : ''">处置意见</span>

				<image @click="isOpinionClick(false)" :class="isOpinion ? 'card_title_left_disable' : ''"
					style="width: 1.2rem; height: 1.2rem; margin-left: 2rem"
					src="~@/static/images/correction/correction-warn-punish.png">
				</image>
				<span @click="isOpinionClick(false)" :class="isOpinion ? 'card_title_left_disable' : ''">惩办意见</span>
			</view>
			<view class="card_title_right">
				<u-icon @click="toShow()" :name="isShow ? 'arrow-down' : 'arrow-up'" size="20"></u-icon>
			</view>
		</view>

		<view v-if="isShow">
			<u-divider style="margin: 0 0 0.6rem 0"></u-divider>

			<view class="card_operation">
				<view class="card_operation_opinion">
					<u--textarea v-if="isOpinion" v-model="disposiObj.record" placeholder="请输入处置意见"></u--textarea>
					<u--textarea v-else v-model="punishObj.record" placeholder="请输入惩办意见"></u--textarea>
				</view>
				<!-- 上传组件 -->
				<view class="card_operation_upload">
					<Upload v-if="isOpinion" @f_echoids="s_disposi_echoids" :key="uploadKey" uploadtype="uploadImg"
						:value='disposiObj.fileids' />
					<Upload v-else @f_echoids="s_punish_echoids" :key="uploadKey" uploadtype="uploadFile"
						:value='punishObj.fileids' />
				</view>
				<view class="card_operation_button">
					<u-button @click="handleSave" style="width: 46%; background-color: #5fc064; border: #5fc064;"
						type="primary" text="保存"></u-button>
					<u-button @click="modalShow" style="width: 46%;" type="primary" text="完成"></u-button>

				</view>
			</view>
		</view>

		<u-modal :show="isModal" :showCancelButton='true' @cancel="modalCancel" @confirm="modalConfirm">
			<view v-slot="content">
				确定已完成吗？
			</view>
		</u-modal>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		nanoid
	} from 'nanoid'
	import {
		saveCre_work_record
	} from '@/common/api/correction/cre_work_record.js'
	import {
		complete,
		updateWorktype
	} from '@/common/api/correction/cre_work.js'
	import {
		Tp_crc_workValue
	} from '@/common/enumeration/Tp_crc_work.js'
	import mixinTool from '@/common/mixin/mixin-tool.js'
	export default {
		mixins: [mixinTool],
		props: {
			warnid: {
				type: String,
				require: true
			},
			workid: {
				type: String,
				require: false
			}
		},
		data() {
			return {
				worktype: undefined, // 兄弟组件的单选类型
				isModal: false,
				uploadKey: 0, // 删除文件组件刷新key
				disposiObj: {
					record: undefined, // 处置记录
					userid: null,
					fileids: null, // 处置附件
					workid: null, // 预警任务
					ispis: 3201
				}, // 处置意见对象
				punishObj: {
					record: undefined, // 处置记录
					userid: null,
					fileids: null, // 处置附件
					workid: null, // 预警任务
					ispis: 3200
				}, // 承办意见对象
				isShow: true,
				isOpinion: true, // 是否填写处置意见
				disposiValue: undefined, // 处置意见
				punishValue: undefined // 惩办意见
			}
		},
		created() {
			this.punishObj.id = this.punishObj.workid + nanoid()
			this.disposiObj.id = this.punishObj.workid + nanoid()
			this.disposiObj.userid = this.punishObj.userid = this.APPROVE_USER.userid
			this.disposiObj.warnid = this.punishObj.warnid = this.warnid
			this.disposiObj.workid = this.punishObj.workid = this.workid
			// 拿兄弟组件的单选结果
			this.$EventBus.$on('setVerifyValue', (worktype) => {
				console.log('setVerifyValue', worktype)
				this.worktype = worktype
			})
		},
		beforeDestroy() {
			this.$EventBus.$off("setVerifyValue");
		},
		methods: {
			// 模态框确定
			async modalConfirm() {
				let res = await updateWorktype(this.workid, this.warnid, this.worktype)
				if (res && res.code != 0) {
					return
				}
				const {
					code
				}  = await complete(this.workid)
				if (code == 0) {
					this.$refs.uToast.show({
						position: 'top',
						message: '操作成功',
						type: 'success'
					})
					this.goBack()
				}
			},
			// 模态框显示
			modalShow() {
				this.isModal = true
			},
			// 模态框取消
			modalCancel() {
				this.isModal = false
			},
			// 回显处置附件id
			s_disposi_echoids(value) {
				// console.log('回显处置附件', value)
				this.disposiObj.fileids = value
			},
			// 回显承办附件id
			s_punish_echoids(value) {
				// console.log('s_punish_echoids', value)
				this.punishObj.fileids = value
			},
			// 保存处置记录
			async handleSave() {
				// 保存对象
				let saveObj = null
				let message = null
				if (this.isOpinion) {
					if (!this.disposiObj.record) {
						message = '请输入处置意见'
					}
					saveObj = this.disposiObj
				} else {
					if (!this.punishObj.record) {
						message = '请输入惩办意见'
					}
					saveObj = this.punishObj
				}
				if (message) {
					this.$refs.uToast.show({
						position: 'top',
						message: message,
						type: 'warning'
					})
					return
				}
				// 更新任务主表处置类型
				this.showAnimation('请稍后')
				if (this.worktype && this.worktype != Tp_crc_workValue.UNDO) {
					const {
						code
					} = await updateWorktype(this.workid, this.warnid, this.worktype)
					if (code != 0) {
						return
					}
				}
				let res = await saveCre_work_record(saveObj).finally(() => {
					this.hideAnimation()
				})
				if (res.code == 0) {
					this.$refs.uToast.show({
						position: 'top',
						message: '操作成功',
						type: 'success'
					})
				}
			},
			toShow() {
				this.isShow = !this.isShow
			},
			// 切换意见框
			isOpinionClick(val) {
				this.isOpinion = val
				this.uploadKey++
			},
			myEvent(id) {
				console.log(id)
			}
		},

		components: {
			Upload: () => import('@/components/base/Upload.vue')
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	::v-deep .u-textarea {
		background-color: #f5f5f5;
		height: 100px;
		border: none;
	}

	// 列表项
	.card {
		box-shadow: 0rpx 4rpx 10rpx #ccc;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-bottom: 30rpx;
		width: 86%;
		// height: 50%;
		position: relative;
		// border: 1px solid red;
		padding: 0% 4%;

		&_title {
			height: 50px;
			@extend .space_between;
			align-items: center;
			// border: 1px solid red;

			&_left {
				width: 94%;
				display: flex;
				align-items: center;

				image {
					margin-right: 0.6rem;
				}

				&_disable {
					opacity: 0.3;
				}
			}

			&_right {
				// width: 3%;
				margin-right: 4%;
			}
		}

		&_operation {
			// height: 76%;

			// border: 1px solid red;
			&_opinion {
				height: 40%;
				// border: 1px solid red;
			}

			&_upload {
				// height: 50%;
				// height: 160px;
				// border: 1px solid red;
				position: relative;
				margin-top: 2%;

				&_background {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1px dotted #d7d7d7;
					border-radius: 4px;
					@extend .algin_justity_center;
					flex-direction: column;

					&_item {
						width: 100;
						color: #3296fa;

						span {
							font-size: 1.5rem;
						}
					}
				}
			}

			&_button {
				padding: 4% 0;
				@extend .algin_justity_center;
				height: 18%;
				// border: 1px solid red;
			}
		}
	}
</style>